<template>
  <!-- 申请弹窗 -->
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    fullscreen
    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <!-- 节点 -->
    <a-tabs class="approval-tabs" tab-position="left" :defaultActiveKey="activePane">
      <a-tab-pane class="approval-content" tab="节点配置" :key="1">
        <!-- <a-row :gutter="10">
          <a-col>
            <a-button type="primary" icon="plus" @click="searchQuery">新增</a-button>
          </a-col>
        </a-row> -->
        <a-row :gutter="10">
          <a-col :lg="24" :md="24" :sm="24">
            <a-card :bordered="false">
              <a-table
                ref="table"
                size="default"
                :scroll="{ x: true }"
                :columns="columns"
                :dataSource="dataSource"
                :pagination="ipagination"
                :loading="loading"
              >
                <span slot="action" slot-scope="text, record">
                  <!-- <a style="margin-left:10px" @click="reviewNode(record)">查看属性</a> -->
                  <a style="margin-left:10px" @click="editNode(record,queryParam.processDefinitionId)">编辑属性</a>
                </span>
              </a-table>
              <ProcessNodeModal ref="ProcessNodeModal" @ok="getData"></ProcessNodeModal>
            </a-card>
          </a-col>
        </a-row>
      </a-tab-pane>
      <!-- 流程绑定 -->
      <a-tab-pane class="approval-content" tab="流程绑定" :key="2">
        <a-row :gutter="10">
          <a-col>
            <a-button type="primary" icon="plus" @click="addBind">新增</a-button>
            <a-dropdown v-if="selectedRowKeys.length > 0">
                <a-menu slot="overlay">
                <a-menu-item key="1" @click="bindBatchDel"><a-icon type="delete" />批量删除</a-menu-item>
                </a-menu>
                <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
            </a-dropdown>
          </a-col>
        </a-row>
        <a-row :gutter="10">
          <a-col :lg="24" :md="24" :sm="24">
            <a-card :bordered="false">
              <a-table
                ref="table"
                size="default"
                rowKey="id"
                :scroll="{ x: true }"
                :columns="columns2"
                :dataSource="dataSource2"
                :pagination="ipagination2"
                :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
                :loading="loading2"
              >
                <span slot="action" slot-scope="text, record">
                  <a @click="reviewBind(record)">详情</a>
                  <a style="margin-left:10px" @click="editBind(record)">编辑</a>
                  <a-popconfirm style="margin-left:10px" title="确定删除?" @confirm="() => bindDelete(record.id)">
                    <a>删除</a>
                  </a-popconfirm>
                </span>
              </a-table>
              <ProcessBindModal ref="ProcessBindModal" @ok="getData2"></ProcessBindModal>
            </a-card>
          </a-col>
        </a-row>
      </a-tab-pane>
    </a-tabs>
  </j-modal>
</template>

<script>
import STable from '@/components/table/'
import ProcessNodeModal from './ProcessNodeModal'
import ProcessBindModal from './ProcessBindModal'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getAction, postAction, deleteAction } from '@/api/manage'
export default {
  name: 'ProcessSetModal',
  components: {
    STable,
    ProcessNodeModal,
    ProcessBindModal
  },
  mixins: [JeecgListMixin],
  data() {
    return {
      title: '配置',
      width: 800,
      disableMixinCreated: true,
      loading: false,
      loading2: false,
      visible: false,
      disableSubmit: false,
      editable: true,
      activePane: 1,
      queryParam: {
        processDefinitionId: ''
      },
      formData: {},
      url: {
        list: '/workflow/taskNodeList',
        list2: '/workflow/processBind/list',
        delete2:'/workflow/processBind/delete',
        deleteBatch2: '/workflow/processBind/deleteBatch'
      },

      workflowModel: {
        operation: 'start'
      },
      dataId: '',
      dataSource: [],
      dataSource2: [],
      ipagination2: {},
      // 表头
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '节点名称',
          align: 'center',
          width: 200,
          dataIndex: 'taskName'
        },
        {
          title: '默认处理人',
          align: 'center',
          width: 150,
          dataIndex: 'defaultHandlerName'
        },
        {
          title: '办理人表达式',
          align: 'center',
          width: 150,
          dataIndex: 'handlerUsersExpression'
        },
        {
          title: '是否可修改执行人',
          align: 'center',
          width: 150,
          dataIndex: 'canChooseHandler'
        },
        {
          title: '操作',
          align: 'center',
          fixed: 'right',
          width: 150,
          scopedSlots: { customRender: 'action' }
        }
      ],
      // 表头
      columns2: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '流程定义名称',
          align: 'center',
          width: 150,
          dataIndex: 'processName'
        },
        {
          title: '流程定义Key',
          align: 'center',
          width: 250,
          dataIndex: 'processKey'
        },
        {
          title: '业务表',
          align: 'center',
          width: 250,
          dataIndex: 'relatedTable'
        },
        {
          title: '业务名称',
          align: 'center',
          width: 200,
          dataIndex: 'bizName'
        },
        {
          title: '标题表达式',
          align: 'center',
          width: 150,
          dataIndex: ' titleExpression'
        },
        {
          title: '业务处理界面',
          align: 'center',
          width: 180,
          dataIndex: 'bizUrl'
        },
        {
          title: '优先级',
          align: 'center',
          width: 150,
          dataIndex: 'priority'
        },
        {
          title: '操作',
          align: 'center',
          fixed: 'right',
          width: 160,
          scopedSlots: { customRender: 'action' }
        }
      ]
    }
  },
  methods: {
    addNode() {
      this.$refs.ProcessNodeModal.title = '添加'
      this.$refs.ProcessNodeModal.add()
    },
    editNode(record,fid) {
      this.$refs.ProcessNodeModal.title = '编辑'
      this.$refs.ProcessNodeModal.edit(record,fid)
    },
    reviewNode(record) {
      this.$refs.ProcessNodeModal.title = '详情'
      this.$refs.ProcessNodeModal.review(record)
    },
    addBind() {
      this.$refs.ProcessBindModal.title = '添加'
      this.$refs.ProcessBindModal.add({
        processKey: this.queryParam.processDefinitionKey,
        processName: this.queryParam.processDefinitionName
      },{processKey:true,processName:true})
    },
    editBind(record) {
      this.$refs.ProcessBindModal.title = '编辑'
      this.$refs.ProcessBindModal.edit(record,{processKey:true,processName:true})
    },
    reviewBind(record) {
      this.$refs.ProcessBindModal.title = '详情'
      this.$refs.ProcessBindModal.review(record)
    },
    bindDelete(id){
      deleteAction(this.url.delete2,{id}).then(res =>{
          if(res.success){
            this.$message.success('删除成功');
            this.getData2()
          }else{
            this.$message.error(res.message)
          }
      })
    },
    bindBatchDel: function () {
      if(!this.url.deleteBatch2){
        this.$message.error("请设置api.leteBatch属性!")
        return
      }
      if (this.selectedRowKeys.length <= 0) {
        this.$message.warning('请选择一条记录！');
        return;
      } else {
        var ids = "";
        for (var a = 0; a < this.selectedRowKeys.length; a++) {
          ids += this.selectedRowKeys[a] + ",";
        }
        var that = this;
        this.$confirm({
          title: "确认删除",
          content: "是否删除选中数据?",
          onOk: function () {
            that.loading = true;
            deleteAction(that.url.deleteBatch2, {ids: ids}).then((res) => {
              if (res.success) {
                that.$message.success(res.message);
                that.selectedRowKeys = [];
                that.selectionRows = [];
                that.getData2()
              } else {
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.loading = false;
            });
          }
        });
      }
    },
    open(record) {
      this.visible = true
      this.queryParam = record
      this.queryParam.processKey = record.processDefinitionKey
      this.getData()
      this.getData2()
    },
    getData(parameter) {
      let params = Object.assign({}, parameter, this.queryParam)
      getAction(this.url.list, params).then(res => {
        let record = res.result || []
        record = record.map((item, key) => {
          return {
            key,
            ...item
          }
        })
        this.dataSource = record
      })
    },
    getData2(parameter) {
      let params = Object.assign({}, parameter, this.queryParam)
      getAction(this.url.list2, params).then(res => {
        let record = res.result.records || []
        record = record.map((item, key) => {
          return {
            key,
            ...item
          }
        })
        this.dataSource2 = record
        this.ipagination2.total = res.result.total
      })
    },
    searchQuery() {},
    close() {
      this.$emit('close')
      this.title = ''
      this.editable = true
      this.formData = {}
      this.disableSubmit = false
      this.visible = false
    },
    handleOk() {
      this.$emit('ok')
      this.visible = false
    },
    handleCancel() {
      this.close()
    }
  }
}
</script>

<style></style>
